<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的过滤</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(person,index) in persons" :key="person.id">
            {{person.id}}----{{ person.name }}----{{person.age}}
        </li>
    </ul>
    <button @click="update">点击修改第一项的name</button>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.config.productionTip=false;//设置为 false 以阻止 vue 在启动时生成生产提示。
    const vm=new Vue({
        el:"#app",
        data(){
            return {
                keyword:"",
                persons:[
                    {id:1,name:'zhaoliying',age:33},
                    {id:2,name:'yangmi',age:34},
                    {id:3,name:'qiwei',age:33},
                    {id:4,name:'dilireba',age:20}
                ]
            }
        },
        methods:{
            update(){
                //1.
                // this.persons[0].name='yingbao';
                //2
                // this.persons[0]= {id:1,name:'yingbao',age:33};
                //3 数组的方法splice(增删改一体化) 返回的都是删除的元素组成的数组
                //如果参数是2个 表示删除 一个是从那个索引开始 第二个参数是删除几个
                //.......多个  是增还是改 第二个参数是0 表示增 如果不是0表示改
                this.persons.splice(0,1,{id:1,name:'yingbao',age:33})
            }
        },
    });
    //在vue中 一开始data中的属性数据都是响应式的
    //数组的数据 说的每个数组当中元素的整体
    //对象的数据说的是对象的属性
    //1.如果修改的是对象的书 随便改 都是响应式的
    //  因为vue一开始就为data当中所有的属性通过Object.defineProperty添加了get和set
    //2.数组修改的时候 必须使用特定的几个方法才能是响应式的,如果直接通过下标操作数组的数据 不是响应式的
    // 为什么数组的方法就是响应式的那?
    // 此splice并非原生的splice cue中给数组部分方法天机了修改页面的功能(重写数组的方法)

    //面试高频题
    //总结 vue在对待数组和对象的时候处理响应式是不一样的
    //对象 是添加Object.defineProperty添加了get和set
    //数组 是重写数组的方法

</script>
</body>
</html>